<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../Public/js/jquery-1.11.1.min.js"></script>
    <link href="../Public/css/bootstrap.min.css" rel="stylesheet">
    <script src="../Public/js/bootstrap.min.js"></script>
    <style>
        .m{text-align: center;height: 20px;line-height: 20px;width: 150px;font-size: 12px;border: solid 1px #ffe89b;background:orange;position: absolute;top: -200px;left: 0;right: 0;bottom: 0;margin: auto;display: none;}
        .pp{height: 400px;width: 700px;margin: auto;margin-top: 50px;}
        .in{background-color:white}
        .game{
            text-align: center;
            height: 330px;
            line-height: 330px;
            width: 700px;
            background:rgba(44,44,44,.7);
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            font-size: 100px;
            color: red;
            display: none;
        }
        .btn1{
            display: none;
            position: absolute;
            top: 330px;
            left:300px;
            margin: auto;
            width: 100px;
        }
        .modal{
            display: none;
        }
        .abc{
            display: none;
        }
    </style>
</head>
<body>
<div class="panel panel-primary" style="height: 400px;width: 700px;margin: auto;margin-top: 50px;">
    <div class="panel-heading">
        <span>比大小游戏</span>
    </div>
    <div class="panel-body">
            <img src="aa.png" style="height: 300px;width: 300px;float: left;margin-left:-12px;margin-top: 12px ">
            <div style="float: left ;margin-left: 200px;margin-top: 50px;font-size: 20px;color: orangered">比大小排行</div>
            <div style="padding-left: 120px;padding-top: 100px">
                <div>第一名：<input style="font-size: 20px;background: white" value="" type="button" id="diyi"></div>
                <div>第二名：<input style="font-size: 20px;background: white" value="" type="button" id="dier"></div>
                <div>第三名：<input style="font-size: 20px;background: white" value="" type="button" id="disan"></div>
            </div>
            <button style="width: 150px;height: 50px;margin-top: 50px;margin-left: 180px;" data-toggle="modal" data-target="#q">开始</button>
    </div>
</div>

<div class="modal fade" id="q">
        <div class="modal-content pp in">
            <div class="modal-header" style="background: rgb(66,139,202.100)">
                <button class="close" data-dismiss="modal" style="color: white" type="button">&times;</button>
                <span style="color: white">比大小游戏</span>
            </div>
            <div style="margin-top: 50px;">
                <div class="m" id="yt"></div>

                <div class="game">Game over</div>

                <button class="btn1" id="bp">确定</button>

                <div style="position: absolute;top: 100px;left: 450px;">玩家</div>
                <div style="position: absolute;top: 100px;left: 50px;">电脑</div>

                <input type="button" value="???" style="font-size: 80px;text-align: center;color: #9B410E;background: white;border: 1px solid gray;height: 170px;width: 200px;float: left;margin-left: 50px" id="b">

                <div style="border: 1px solid gray;height: 130px;width: 100px;float: left;margin-left: 50px;margin-top: 20px">
                    <div style="margin-left:10px;color: red;margin-top: 45px ">
                        分数:<input type="button" id="c" value="0" style="background:white">
                    </div>
                    <div style="margin-left:10px ">
                        生命:<input type="button"  id="d" value="3" style="background:white">
                    </div>
                </div>

                <input type="button" value="???" style="font-size: 80px;text-align: center;color: #9B410E;background: white;border: 1px solid gray;height: 170px;width: 200px;float: left;margin-left: 50px" id="a">

            </div>
            <input type="button" style="margin-left: 150px;margin-top: 50px;width: 100px" id="比一比" value="比一比" onClick="f(this.id)">
            <input type="button" style="margin-left: 200px;margin-top: 50px;width: 100px" value="不玩了" id="bwl">
        </div>
</div>

<div class="abc">
    <div class="modal-content" style="width: 300px;margin: auto;margin-top: 100px;">
        <div class="modal-header" style="background: rgb(66,139,202);color: white">
            <button class="close" data-dismiss="modal" style="color: white" type="button">&times;</button>
            你确定不玩了？
        </div>
        <div class="modal-body">
            确定不玩了？
        </div>
        <div class="modal-footer">
            <button id="gb">是</button>
            <button>否</button>
        </div>
    </div>
</div>

<div class="modal">
    <div class="modal-content" style="width: 400px;margin: auto;margin-top: 100px;">
        <div class="modal-header" style="background: rgb(66,139,202);color: white">
            <button class="close" data-dismiss="modal" style="color: white" type="button">&times;</button>
            输入
        </div>
        <div class="modal-body">
            <div>人过留名，雁过留声</div>
            <input style="width: 300px;" value="" id="oo">
        </div>
        <div class="modal-footer">
            <button  data-dismiss="modal" id="ezz">确定</button>
            <button  data-dismiss="modal">取消</button>
        </div>
    </div>
</div>
<script>
    var i = document.getElementById("比一比");
    var a = document.getElementById('a');//玩家
    var b = document.getElementById('b');//电脑
    var c = document.getElementById('c');//分数
    var d = document.getElementById('d');//生命
    var ezz = document.getElementById('ezz');//人过留名，雁过留声的确定
    var diyi = document.getElementById('diyi');
    var yt = document.getElementById('yt');//提示框的
    var m = $('.m');//提示框的
    var game = $('.game');
    var btn1=$('.btn1');
    var modal=$('.modal');
    var abc=$('.abc');
    var oo = document.getElementById('oo');//人过留名，雁过留声的输入
    var bp = document.getElementById("bp");
    var bwl = document.getElementById("bwl");
    var gb = document.getElementById("gb");
    var timerId;
    var timer;
        function f(n){
            if(n=="比一比"){
                timer = setInterval(function(){
                    var m=parseInt(Math.random()*1000);
                    a.value=m;
                    return t=m;
                },50)
                timerId = setInterval(function(){
                    var s=parseInt(Math.random()*1000);
                    b.value=s;
                    return o=s;
                },50)
                i.value="停";
                i.id="停";
            }
            if(n=="停"){
                clearInterval(timer);
                clearInterval(timerId);
                i.value="比一比";
                i.id="比一比";
                console.log(o);//电脑
                console.log(t);//玩家
                if(o>t){//电脑胜利
                    var p=o-t;
                    console.log(p);
//                    var pp=parseInt(p);
                    if(p!=null){
                        var p=1;
                        var dd=parseInt(d.value);
                        yt.innerHTML="生命值："+"-"+p;
                        m.show();
                        setTimeout(function(){
                            m.hide();
                        },2000);
                        d.value=dd-=p;
                        if(d.value<=0){//生命小于0了
                            game.show();
                            btn1.show();
                            return cj= c.value;
                        }
                    }
                }
                if(o<t){//玩家胜利
                    var l=t-o;
                    console.log(l);
                    var ll=parseInt(l);
                    var cc=parseInt(c.value);
                    yt.innerHTML="恭喜获得："+ll;
                    m.show();
                    setTimeout(function(){
                    m.hide();
                    },2000);
                    c.value=cc+=ll;
                }
            }
    }
ezz.onclick=function(){
    modal.hide();
    if(oo.value==null){
        ezz.id="见不得人";
        diyi.value=ezz.id+':'+cj;
    }
        if(oo.value!=null){
            ezz.id=oo.value;
            diyi.value=ezz.id+':'+cj;
        }

}
    bp.onclick=function (){
        modal.show();
    }
    bwl.onclick = function(){
        abc.show();
    }
//    gb.onclick=function (){
//        wr.hide();
//    }

</script>
</body>
</html>